<!--
 * @Description: 表格组件
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-10-14 19:29:55
 * @LastEditors: Civet
 * @LastEditTime: 2019-10-15 19:30:39
 -->
<template>
  <div class="ct_table">
    <div class="ct_center">
      <el-scrollbar :native="false" tag="section" class="el-scroll">
        <el-table
          :data="showtableData"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          v-loading="showTableLoading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(21, 29, 54, 0.8)"
          border
          highlight-current-row
        >
          <el-table-column
            v-for="(item,index) in showTableList"
            :key="index"
            align="center"
            :show-overflow-tooltip="true"
            :prop="item.id"
            :label="item.name"
          ></el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
    <!-- <div class="ct_bottom">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        background
        :page-count="10"
        :page-sizes="[5, 10, 20, 40]"
      ></el-pagination>
    </div>-->
  </div>
</template>

<script>
export default {
  components: {},
  name: "ShowTable",
  watch: {},
  props: {
    showTableLoading: {
      type: Boolean,
      default: false
    },
    showtableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    showTableList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  filters: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  destroyed() {}
};
</script>

<style scoped lang="less">
.ct_table {
  width: 100%;
  height: 100%;

  .ct_center {
    width: 100%;
    // height: calc(~"100% - 0.5rem");
    height: 100%;
  }
  .ct_bottom {
    .flex();
    justify-content: flex-end;
    width: 100%;
    height: 0.5rem;
  }
}
</style>
